<template>
	<div id='login'>
		<div class="login-wrap">
			<ul class="menu-tab">
				<li v-for="item in menuTab" :key="item.id" :class="{'current': item.current}" @click="toggleMenu(item)">
					{{ item.txt }}
				</li>
			</ul>
			<!-- 表单 -->
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-form" size="medium">
				<el-form-item prop="username">
					<label for="username">邮箱</label>
					<el-input type="text" v-model="ruleForm.username" autocomplete="off" id='username'>
					</el-input>
				</el-form-item>

				<el-form-item prop="password">
					<label for="password">密码</label>
					<el-input id="password" type="password" v-model="ruleForm.password" autocomplete="off" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item prop="passwords" v-if='mode==="register"'>
					<label for="passwords">确认密码</label>
					<el-input type="password" v-model="ruleForm.passwords" autocomplete="off" id='passwords' maxlength="20"></el-input>
				</el-form-item>
				<el-form-item prop="code">
					<label for="code">验证码</label>
					<el-col :span="15" style='padding-right: 15px;'>
						<el-input v-model="ruleForm.code" minlength="6" maxlength="6" autocomplete="off">
						</el-input>
					</el-col>
					<el-col :span="9">
						<el-button type="success" class="block" @click='subCode' :disabled='codeText!=="验证码"'>{{codeText}}</el-button>
					</el-col>
				</el-form-item>

				<el-button type="danger" @click="submitForm('ruleForm')" class="login-btn block" :disabled='longinStatus'>
					{{mode==='login' ? '登录' : '注册'}}
				</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		stripscript,
		validateEmail,
		validatePass,
		validateCode
	} from 'utils/validate'
	import {
		setup,
		reactive,
		ref
	} from '@vue/composition-api'
	import {
		GetSms,
		Reg
	} from '@/api/login.js'
	import sha1 from 'js-sha1'
	export default {
		name: 'login',
		// context-->attrs emit listeners parent refs root 
		setup(props, {
			refs,
			root
		}) {
			// 放数据-生命周期，自定义函数
			const menuTab = reactive([{
					txt: '登录',
					current: true,
					type: 'login'
				},
				{
					txt: '注册',
					current: false,
					type: 'register'
				}
			])
			const mode = ref('login')
			const longinStatus = ref(true)
			let ruleForm = reactive({
				username: '5201315@qq.com',
				password: 'cb123456',
				passwords: 'cb123456',
				code: ''
			})
			const codeText = ref('验证码')

			// 方法----------------------
			// 邮箱
			const validateUsername = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入邮箱'));
				} else {
					if (!ruleForm.username !== '') {
						validateEmail(ruleForm.username) && callback(new Error('请输入正确邮箱！！'));
						callback();
					}

				}
			};
			// 密码
			const validatePassword = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (ruleForm.password !== '') {
						ruleForm.password = value = stripscript(value) //过滤特殊字符
						// 其它验证
						validatePass(ruleForm.password) && callback(new Error('请输入6-20位的密码！！'));
					}
					callback();
				}
			};
			const validatePassword2 = (rule, value, callback) => {

				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== ruleForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					ruleForm.passwords = value = stripscript(value) //过滤特殊字符
					callback();
				}
			};
			// 验证码
			const validateCodes = (rule, value, callback) => {
				// ruleForm.code = value = stripscript(value) //过滤特殊字符
				if (value === '') {
					callback(new Error('请输入验证码'));
				} else {
					if (ruleForm.code !== '') {
						validateCode(ruleForm.code) && callback(new Error('请输入正确验证码！！'));
						callback();
					}

				}
			};

			const rules = reactive({
				username: [{
					validator: validateUsername,
					trigger: 'blur'
				}],
				password: [{
					validator: validatePassword,
					trigger: 'blur'
				}],
				passwords: [{
					validator: validatePassword2,
					trigger: 'blur'
				}],
				code: [{
					validator: validateCodes,
					trigger: 'blur'
				}]
			})

			const submitForm = (formName) => {
				refs[formName].validate(async (valid) => {
					if (!valid) return root.$message.error('error submit!!')
					// mode.value
					if (mode.value === 'login') {
						// 登录
						const res =await root.$store.dispatch('app/login',{...ruleForm,password:sha1(ruleForm.password)})
						root.$message.success(res.message)
						// 跳转页面
						root.$router.push('/console')
							
					} else if (mode.value === 'register') {
						// 注册
						const res = await Reg({...ruleForm,password:sha1(ruleForm.password),passwords:sha1(ruleForm.password)})
						toggleMenu(menuTab[0])
						root.$message.success(res.message)
					}

				});
			}

			const toggleMenu = (item) => {
				menuTab.forEach((elem, index) => {
					elem.current = false;
				});
				// 高光
				item.current = true;
				// 修改模块值
				mode.value = item.type
				// 再把输入框制空 
				refs['ruleForm'].resetFields();
				// 清除倒计时
				clearInterval(timer.value)
				codeText.value = '验证码'
			}

			let timer = ref(null)

			const subCode = () => {
				if (!ruleForm.username) {
					return root.$message('请输入邮箱')
				}
				if (!ruleForm.password) {
					return root.$message('请输入密码')
				}
				if (validateEmail(ruleForm.username)) {
					return root.$message('请输入正确邮箱格式')
				}

				codeText.value = '发送中...'
				const countDown = () => {
					codeText.value = 10
					if (timer.value) clearInterval(timer);
					timer.value = setInterval(() => {
						codeText.value -= 1
						if (codeText.value <= 0) {
							clearInterval(timer.value)
							codeText.value = '验证码'
							return
						}
					}, 1000)

				}
				setTimeout(() => {
					GetSms({
							username: ruleForm.username,
							module: mode.value
						})
						.then(res => {
							root.$message.success(res.message)
							countDown()
							longinStatus.value = false
						})
						.catch(err => {
							console.log(err)
						})
				}, 500)
			}


			return {
				menuTab,
				mode,
				ruleForm,
				rules,
				toggleMenu,
				submitForm,
				subCode,
				longinStatus,
				codeText
			}
		}
	};
</script>
<style lang='scss' scoped>
	#login {
		position: relative;
		height: 100vh;
		background-color: #344a5f;
	}

	.login-wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 330px;
	}

	.menu-tab {
		text-align: center;

		li {
			display: inline-block;
			width: 88px;
			line-height: 36px;
			font-size: 14px;
			color: #fff;
			border-radius: 2px;
			cursor: pointer;
		}

		.current {
			background-color: rgba(0, 0, 0, .1);
		}
	}

	.login-form {
		margin-top: 29px;

		label {
			display: block;
			margin-bottom: 3px;
			font-size: 14px;
			color: #fff;
		}

		.item-from {
			margin-bottom: 13px;
		}

		.block {
			display: block;
			width: 100%;
		}

		.login-btn {
			margin-top: 19px;
		}
	}
</style>
